<!-- 工作台 =》 工单管理(管理员) =》 工单监控 =》 工单详情-->
<template>
  <view class="task-detail-main">
    <nav-bar class="header" back title="未领取工单详情" @goBack="goBack" />
    
    <view class="main-container">
      <!-- 工单详情 -->
      <plateTitle title="工单详情" class="plate-title"/>
      <view class="task-info-container">
        <van-cell-group>
          <van-cell v-for="(item,index) in taskInfoData" :key="index" :title="item.title" :value="item.value" />
        </van-cell-group>
      </view>
    </view>
  </view>
</template>

<script>
import navBar from "../../../components/common/nav-bar";
import plateTitle from '../../../components/business/plateTitle.vue';
export default {
  name: "taskDetail",
  components: {
    navBar,
    plateTitle,
  },
  data() {
    return {
      taskName:'',//工单名称
      siteName:'',// 站点名称
      timeDate:'',// 开工时间
      fzrName:'' // 负责人
    }
  },
  onLoad(e) {
    this.taskName = e.name
    this.siteName = e.siteName
    this.timeDate = e.timeDate
    this.fzrName = e.fzrName
  },
  computed:{
    taskInfoData:function() {
      return [
        {
          title: "工单名称",
          value:  this.taskName
        },
        {
          title: "巡视站点名称",
          value: this.siteName
        },
        {
          title: "计划开工时间",
          value: this.timeDate?this.timeDate:''
        },
        // {
        //   title: "负责人",
        //   value: this.fzrName?this.fzrName:''
        // },
      ]
    }
  },
  methods:{
    goBack() {
      uni.navigateTo({
        url: '/pages/workBench/taskMonitor/taskMonitor'
      })
    }
  }
};
</script>

<style scoped lang="scss">
.task-detail-main {
  min-height: 100vh;
  background: #F2F6FA;
  .header {
    position: sticky;
    top: 0;
  }
  .main-container {
    padding: px2vh(30) px2vw(30) px2vh(30) px2vw(30);
    
    .plate-title {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }
    
    .task-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;
    }
  }
}
</style>